<template>
  <div style="width:182px;height:316px;background:red">
      <div class="wrap" style="width:100%;padding-right:2px">
          <div class="item" v-for="(item,index) in Data" :key="item.id" style="width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;">
              <div class="data" style="font-size: 14px;
    display: flex;
    justify-content: space-between;">
                  <div style="color: #006f4e;font-family: DINPro;">{{item.dataL}}</div>
                  <div style="color: #fff;font-family: DINPro;">{{item.dataR}}</div>
              </div>
              <div class="title" style="display: flex;
    justify-content: space-between;
    position: relative;
    font-size: 12px;
    transform: scale(0.9);">
                  <div style="color: #006f4e;margin-left: -10px;transform: scale(0.85);transform-origin:left;white-space:nowrap;">{{item.titleL}}</div>
                  <div style="color: #fff;;transform: scale(0.85);transform-origin:right;white-space:nowrap;" :style="index===1?'margin-left:-16px;':'margin-right: -10px'">{{item.titleR}}</div>
              </div>
              <div class="bar" style=" display: flex;
    justify-content: space-between;">
                  <div style="width: 49%;
    height: 6px;
    border-radius: 3px;
    background-color: #006f4e;margin-bottom:14px"></div>
                  <div style="width: 49%;
    height: 6px;
    border-radius: 3px;
    background: #00cc83;margin-bottom:14px"></div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
    data(){
        return{
            Data: [
                {
                    titleL: '临时箱变数量/个',
                    dataL: 1389,
                    titleR: '临时箱变容量/MVA',
                    dataR: 2000,
                },
                {
                    titleL: '低压分支箱数量/个',
                    dataL: 5180,
                    titleR: '低压分支箱容量/MVA',
                    dataR: 1200,
                },
                {
                    titleL: '发电车数量/个',
                    dataL: 1389,
                    titleR: '发电车容量/MVA',
                    dataR: 2000,
                },
                {
                    titleL: 'UPS数量/个',
                    dataL: 1389,
                    titleR: 'UPS容量/MVA',
                    dataR: 2000,
                },
                {
                    titleL: 'ATS数量/个',
                    dataL: 1389,
                    titleR: 'ATS容量/MVA',
                    dataR: 2000,
                },
                {
                    titleL: 'SSTS数量/个',
                    dataL: 1389,
                    titleR: 'SSTS容量/MVA',
                    dataR: 2000,
                },
            ]
        }
    },
    methods: {
    },
}
</script>

<style scoped>/*
.item{
    width: 100%;
    height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.item > div > div:first-child{
    color: #006f4e;
}
.item > div > div:last-child{
    color: #fff;
}
.data{
    font-size: 16px;
    display: flex;
    justify-content: space-between;
}
.title{
    display: flex;
    justify-content: space-between;
    position: relative;
    font-size: 12px;
    transform: scale(0.9);
}
.title > div:first-child{
    margin-left: -10px;
}
.title > div:last-child{
    margin-right: -10px;
}
.bar{
    display: flex;
    justify-content: space-between;
}
.bar > div{
    width: 49%;
    height: 6px;
    border-radius: 3px;
    background-color: #006f4e;
}
.bar > div:last-child{
    background: #00cc83;
}
*/
</style>